<template>
  <div class="page5">
    <div class="containt fadeInDown">
      <p> <span class="yellowfont">职能星球</span>2022年，我们为集团更多部门提供了数字化生态平台，有效提升了各部门的管控范围和力度，职能生态平台进入了全面深化平台能力、全面加强应用的全新阶段。</p>
    </div>
    <!-- <div class="img1 animate__fadeInRight">
            animate__lightSpeedInRight
            <img class="btm animate__fadeInRight " src="../../assets/images/bill2022/5/btm2.png" alt="" srcset="">
            <div class="slideUp">
                <img class="btm1  animate__fadeInBottomLeft" src="../../assets/images/bill2022/5/btm1.png" alt="" srcset="">
            </div>
        </div> -->
  </div>
</template>
<script>
export default {
  components: {
  },
  // 定义属性
  data () {
    return {

    }
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
}
</script>
<style lang='less' scoped>
.page5 {
  display: flex;
  align-items: center;
  flex-direction: column;
  .containt {
    margin-top: 3rem;
    width: 38.5rem;
    text-align: left;
    font-size: 2.1rem;
    font-family: PingFang SC, PingFang SC-Semibold;
    font-weight: 400;
    color: #fefefe;
    line-height: 3.2rem;

    .yellowfont {
      color: #fbd858;
      font-weight: 600;
      font-size: 2.25rem;
      padding-right: 0.4rem;
    }
  }
  .img1 {
    position: absolute;
    position: relative;
    margin-top: 4rem;
    .btm {
      width: 34rem;
      height: 25.3125rem;
      position: absolute;
      right: 0rem;
    }
    .btm1 {
      width: 41.6875rem;
      height: 33.375rem;
      position: absolute;
      left: 0rem;
      top: 12rem;
    }
  }
}

.swiper-slide-active .fadeInDown {
  animation: fadeInDown 1s ease-in-out;
  animation-iteration-count: 1;
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

.swiper-slide-active .animate__fadeInRight {
  animation: fadeInRight 1s ease-in-out;
  animation-iteration-count: 1;
}

@keyframes fadeInBottomLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 100%, 0);
    transform: translate3d(-100%, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

.swiper-slide-active .animate__fadeInBottomLeft {
  animation: fadeInBottomLeft 2s ease-in-out;
  animation-iteration-count: 1;
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
    transform: translate3d(0, -20%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

.swiper-slide-active .animate__fadeInRight {
  animation: fadeInRight 1s ease-in-out;
  animation-iteration-count: 1;
}
.slideUp {
  animation: slideUp 1s ease-in-out;
  -webkit-animation: slideUp 1s ease-in-out;
  -moz-animation: slideUp 1s ease-in-out; /*gecko内核的浏览器（如 Firefox）*/
  -o-animation: slideUp 1s ease-in-out; /*Opera 浏览器*/
  -ms-animation: slideUp 1s ease-in-out; /*IE8+*/
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes slideUp {
  0% {
    transform: translateY(0);
    transform: scale3d(1);
  }

  100% {
    transform: translateY(1rem);
    transform: scale3d(1.2);
  }
}
@-webkit-keyframes slideUp {
  0% {
    transform: translateY(0);
    transform: scale3d(1);
  }
  100% {
    transform: translateY(1rem);
    transform: scale3d(1.2);
  }
}

@-moz-keyframes slideUp {
  0% {
    transform: translateY(0);
    transform: scale3d(1);
  }
  100% {
    transform: translateY(1rem);
    transform: scale3d(1.2);
  }
}
@-o-keyframes slideUp {
  0% {
    transform: translateY(0);
    transform: scale3d(1);
  }
  100% {
    transform: translateY(1rem);
    transform: scale3d(1.2);
  }
}
@-ms-keyframes slideUp {
  0% {
    transform: translateY(0);
    transform: scale3d(1);
  }
  100% {
    transform: translateY(1rem);
    transform: scale3d(1.2);
  }
}
@keyframes lightSpeedInRight {
  0% {
    // -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    // transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 1;
  }

  60% {
    -webkit-transform: skewX(3deg);
    transform: skewX(3deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: skewX(-3deg);
    transform: skewX(-3deg);
  }

  to {
    -webkit-transform: skewX(0deg);
    transform: skewX(0deg);
  }
}

.swiper-slide-active .animate__lightSpeedInRight {
  animation: lightSpeedInRight 2s ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
</style>